<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @input="search"
    />
    <div class="hot_name_wrap" v-if="!value">
      <span
        class="hot_item"
        v-for="(item, index) in hotList"
        :key="index"
        @click="search(item.first)"
        >{{ item.first }}</span
      >
    </div>
    <div v-else class="search_wrap">
      <p class="hot_title">热门搜索</p>
      <searchItem
        v-for="item in searchList"
        :key="item.id"
        :title="item.name"
        :label="item.ar[0].name + '-' + item.name"
        :id="item.id"
      />
      <!-- <van-cell
        v-for="item in searchList"
        :key="item.id"
        :title="item.name"
        center
        :label="item.ar[0].name + '-' + item.name"
      > -->
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <!-- <template #right-icon>
          <van-icon name="play-circle-o" class="search-icon" size="20" />
        </template>
      </van-cell> -->
    </div>
  </div>
</template>

<script>
import { hotKeyAPI, keySearchAPI } from "@/api/index.js";
export default {
  data() {
    return {
      value: "",
      // 接收热词变量容器
      hotList: [],
      //  接收搜索关键词的歌曲信息列表
      searchList: [],
      timeID: null,
    };
  },
  created() {
    hotKeyAPI()
      .then((res) => {
        // console.log(res);
        this.hotList = res.data.result.hots;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    search(value) {
      // 防抖
      // 每次执行函数之前把之前得请求数据操作定时器清除掉，这样能保证每一次频繁操作后都只会执行一次
      clearTimeout(this.timeID);
      // 设置一个定时器，为了防止没当输入一个字都要向服务器发送请求，造成对服务器的性能浪费
      this.timeID = setTimeout(() => {
        //   判断value是否有值，有值的话就赋值给搜索框，无值的话就直接发送请求数据
        if (value) {
          this.value = value;
        }
        keySearchAPI({ keywords: this.value })
          .then((res) => {
            //   console.log(res);
            this.searchList = res.data.result.songs;
          })
          .catch((err) => {
            console.log(err);
          });
      }, 500);
    },
  },
};
</script>

<style>
/* 搜索容器的样式 */
.search_wrap {
  padding: 10px;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 14px;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 10px 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 20px;
  margin-right: 20px;
  margin-bottom: 15px;
  padding: 2px 5px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  border-color: #d3d4da;
  border-radius: 20px;
  border: 1px solid #d3d4da;
}
</style>